<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-08 12:31:01
 * @Description: 首页
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title" style="background:#e4f4ff">
    <div class="page_body" slot="page_body">
     
      <div class="query_result">
        <group class="query_group">
          <!-- <cell>
            <div slot="after-title" class="cell_title">公司名称</div>
            <span class="cell_value" style="">{{company_name}}</span>
          </cell>
          <cell>
            <div slot="after-title" class="cell_title">地址</div>
            <span class="cell_value">{{address}}</span>
          </cell> -->
          <cell>
            <div slot="after-title" class="cell_title">联系电话</div>
            <a  class="cell_value" v-if="mobile!='--'" :href="'tel:'+mobile">{{mobile}}</a> <span class="cell_value"  v-else>{{mobile}}</span>
          </cell>
          <div>
            
        <div class="code_list">
            
            <div class="fui-icon-group noborder circle category-lists">
            
                <div class="fui-icon-col" v-for="code in code_list">
                
                    <div href="javascript:;" class="cate-class" >
                
                        <p><img :src='code.code' class="match_code" ></p>
                        <p>
                          <span v-text="code.match_name" class="match_name" ></span>
                        </p>
                    </div>
                
                </div>
            
            </div>
          <p style="padding: 10px 15px;">您有问题还可以给我们留言，我们会及时给您回复。</p>
        </div>
          </div>
        </group>
      
          
        </group>
      </div>
      <div class="query_page">
        <li>
          <input
            class="input_text"
            type="text"
            v-model="realname"
            placeholder="请输入您的姓名"
          />
        </li>
        <li>
          <input
            class="input_text"
            type="text"
            placeholder="请输入您的手机号"
            v-model="msg_mobile"
          />
        </li>
        <li>
          <textarea
            class="input_text"
            type="button"
            placeholder="请输入您的留言"
            v-model="content"
            style="border-radius:unset;height:5rem;resize:none"
          ></textarea>
        </li>
        <li>
          <input
            class="input_botton"
            type="button"
            @click="msg_btn"
            value="提交"
          />
        </li>
        </div>
    </div>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
export default {
  name: "score",
  data() {
    return {
      header_title: "联系我们",
      company_name: "--",
      address: "--",
      mobile: "--",
      code_list:{},
      realname:'',
      msg_mobile:'',
      content:''
    };
  },
  components: {
    commonPage
  },
  created() {
    this.get_contactus();
    this.$wxShare(
      {
        title: "分享标题", // 分享标题
        desc: "分享描述", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    get_contactus() {
      this.$axios
        .post("syset.getcontactus", {})
        .then(res => {
          this.company_name = res.result.company_name;
          this.address = res.result.address;
          this.mobile = res.result.mobile;
          this.code_list = res.result.code;
          console.log(this.code_list);
        })
        .catch(error => {
          console.log(error);
        });
    },
    msg_btn() {
      let that = this;
      let param = {
        name:that.realname,
        content:that.content,
        mobile:that.msg_mobile,
      }
      this.$axios
      .post("syset.msg_btn", param)
      .then(res => {
        if(res.status==1){
          that.$toast({
            message: "留言成功",
            position: "bottom"
          })
          setTimeout(() => {
            location.reload();
          }, 2000);
        }
      })
      .catch(error => {
        console.log(error);
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  margin: 0 4%;
  font-size: 0.7rem;
  div {
    font-size: 0.7rem;

    input {
      font-size: 0.7rem;
    }

    li {
      list-style: none;
      width: calc(100% - 1rem);
      position: relative;
      margin-top: 1.2rem;
      .textarea{
        border :1px solid black
      }
      .input_text {
        width: 100%;
        height: 100%;
        border-radius: 10rem;
        height: 3rem;
        line-height: 3rem;
        border: 0;
        padding-left: 1rem;
        background: #fff;
      }

      .input_botton {
        width: calc(100% + 1rem);
        border-radius: 10rem;
        border: 0;
        color: white;
        height: 3rem;
        line-height: 3rem;
        background: #33f;
      }

      .icon {
        position: absolute;
        top: 0.6rem;
        right: 0rem;
        z-index: 10000;
      }
    }
  }
}
.code_list{
  background:white;position: relative;
}
.query_group {
  .cell_title {
    color: #7e7e7e;
    font-size:1rem;
  }

  .cell_value {
    color: #4c4c4c;
    font-size:1rem;
  }

  .match_name {
    color: #4661d6;
    font-weight: 900;
  }
}
.cate-class{
  display: inline-block;
}
.fui-navbar ~ .fui-content, .fui-content.navbar{
    padding:0;
}
.match_name{
  margin-top:5px;display:inline-block;font-size:0.68rem
}
.fui-icon-group .fui-icon-col{
    padding: 0.5rem 0;
    display:inline-block;text-align:center;margin:0 0.3rem;flex:1
}
.match_code{
  width:5rem;height:5rem
}
.fui-icon-group .fui-icon-col a img{
    width: 100%
}

.fui-knowledge-item {
    color: #000;
}

.fui-icon-group .fui-icon-col .text{
    font-size: 0.7rem;
}

.category-lists{
    width: 93%;
    margin: 0 auto;
    z-index: 99;
    display :flex;
    flex-wrap:wrap
}
</style>
<style lang="stylus" >
.query_group {
  >div {
    background: white;
    border-radius: 0.5rem;
    font-size: 0.7rem;

    &:before {
      content: none;
    }
  }
}
</style>

